<template>
  <div class="basic-setting-container">
    <!-- <Promised :promise="userInfoAsync">
      <template v-slot:pending>
        <Skeleton
          :rows="15"
        />
      </template>
      <template v-slot> -->
    <section>
      <Account />

      <a-divider />

      <Personal />

      <a-divider />

      <Bank />
    </section>
    <!-- </template>
    </Promised> -->
  </div>
</template>

<script>
import Account from './information/modify/Account.vue';
import Personal from './information/info/Personal.vue';
import Bank from './information/modify/Bank.vue';
import user from './user';

export default {
  components: {
    Account,
    Personal,
    Bank
  },

  mixins: [user]
};
</script>

<style lang="scss">
  .basic-setting-container {
    .ant-form-item {
      .ant-form-item-label {
        & > label {
          color: $gray-12!important;
        }
      }

      .value-text {
        color: $black-1;
      }
    }
  }
</style>

<style lang="scss">
.basic-setting-container {
  background-color: $white;
  padding-bottom: 135px;

  .bank-information,
  .account-information {
    padding: $padding-md 70px 0px 90px;

    .infos-container {
      padding-left: 164px!important;
    }
  }

  .information-container {
    // margin-top: $margin-md;
    & > .title {
      font-weight: bold;
      font-size: $font-size-lg;
    }

    .infos-container {
      padding-left: 126px;
    }
    .info-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: $margin-sm;
      color: $gray-12;
      .label {
        display: flex;
        align-items: center;
        span {
          margin-left: $margin-base;
          color: $black-1;
        }
        .password {
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: $black;
        }
      }
    }
  }
}

.basic-setting-container {
  @media (max-width: $screen-lg) {
    .bank-information,
    .account-information {
      padding: $padding-xs;

      .infos-container {
         padding-left: 6px!important;
        padding-right: 0px!important;
      }
    }
  }
}
</style>
